import * as echarts from 'echarts';
import {ref} from 'vue'


export const useInitBar =(parkInfo) =>{
    //获取dom元素
    const barChart = ref(null)
    //渲染柱状图
const initChart = () =>{
    // 1. 解构图表数据
    const { parkIncome } = parkInfo.value
      // 基于准备好的dom，初始化echarts实例
    const myChart = echarts.init(barChart.value);
    // 绘制图表
    const options = {
       // 提示框组件
       tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow',
          },
        },
        grid: {
          // 让图表占满容器
          top: '10px',
          left: '0px',
          right: '0px',
          bottom: '0px',
          containLabel: true,
        },
        xAxis: [
          {
            type: 'category',
            axisTick: {
              alignWithLabel: true,
              show: false,
            },
            data: parkIncome.xMonth,
          },
        ],
        yAxis: [
          {
            type: 'value',
            splitLine: {
              show: false,
            },
          },
        ],
        series: [
          {
            name: '园区年度收入',
            type: 'bar',
            barWidth: '10px',
            data: parkIncome.yIncome.map((item, index) => {
              const color =
                index % 2 === 0
                  ? new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    { offset: 0.23, color: '#74c0f8' },
                    { offset: 1, color: 'rgba(116,192,248,0.00)' },
                  ])
                  : new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    { offset: 0.23, color: '#ff7152' },
                    { offset: 1, color: 'rgba(255,113,82,0.00)' },
                  ])
              return { value: item, itemStyle: { color } }
            }),
          },
        ],
        textStyle: {
          color: '#B4C0CC',
        },
      }
    // 3. 渲染图表
    myChart.setOption(options)
    }
    return{
        barChart,
        initChart
    }
}